// #region ********** 变量 **********

var currentTime;
var startTime;
var endTime;
var speed = 1;
var percent = 0; // 播放时间占比，进度条使用
var updateTimer = undefined;

// #endregion ********** 变量 **********

// #region ********** TwinIOC 初始化阶段 **********

// 创建并获取场景实例对象
function init() {
  window.tgTwinIOC = new twinIOC();
  let { url, locationId, token } = twiniocConfig;

  // 初始化地点
  tgTwinIOC.initLocation({ locationId, url, token }, (result) => {
    // console.log(result, '初始化地点接口');
  });

  // 注册地点加载完成时间
  tgTwinIOC.uniCall(
    'addEventListener',
    {
      eventName: 'locationInit',
      callback: () => {
        // 获取时间轴信息
        getPlayerInfo();

        // 显示时间轴
        document.getElementsByClassName('time-panel')[0].style.display = 'block';
      },
    },
    (result) => {}
  );
}

// #endregion ********** TwinIOC 初始化阶段 **********

// #region ********** TwinIOC 相关操作 **********

// 获取时间轴信息
function getPlayerInfo() {
  tgTwinIOC.uniCall('getPlayerInfo', {}, (result) => {
    // console.log(result, '获取时间轴信息');

    timeData = result.data;
    startTime = new Date(timeData.startTime);
    endTime = new Date(timeData.endTime);
    currentTime = new Date(timeData.startTime);

    // 时间轴模式默认设置回放模式
    setPlayerMode();

    updateTimelineControl();
    onSpeedClick(1);
  });
}

// 设置时间轴状态  播放器状态，"向前播放", "向后播放", "暂停", "停止"
function setPlayerState(playState) {
  let jsonData = {
    play: playState,
  };
  tgTwinIOC.uniCall('setPlayerState', jsonData, (result) => {
    // console.log('setPlayerState', result);
  });
}

// 设置时间轴模式
function setPlayerMode() {
  let jsonData = {
    timeMode: '回放',
  };

  tgTwinIOC.uniCall('setPlayerMode', jsonData, (result) => {
    // console.log('setPlayerMode', result);
  });
}

// 设置时间轴参数
function setPlayerSetting() {
  let jsonData = {
    startTime: formatDate(currentTime, 'YYYY-MM-DD HH:mm:ss'), // 开始时间
    endTime: formatDate(endTime, 'YYYY-MM-DD HH:mm:ss'), // 结束时间
    looping: '单次播放', // 播放形式，"循环播放", "单次播放"
    unit: '秒', // 单位，"天", "时", "分", "秒"
    granularity: speed, // 粒度
  };

  tgTwinIOC.uniCall('setPlayerSetting', jsonData, (result) => {
    // console.log('setPlayerSetting',jsonData, result);
  });
}

// 刷新时间轴数据
function refreshPlayer() {
  tgTwinIOC.uniCall('refreshPlayer', {}, (result) => {
    // console.log('refreshPlayer', result);
  });
}

// #endregion ********** TwinIOC 相关操作 **********

// #region ********** HTML界面控件的事件处理函数 **********

// 播放暂停
function onPlayClick() {
  if (updateTimer) {
    clearInterval(updateTimer);
    updateTimer = '';
    setPlayerState('暂停');
  } else {
    setPlayerState('向前播放');
    // 添加结束位置再次开始逻辑
    if (currentTime.getTime() >= endTime.getTime()) {
      onResetClick();
    }
    updateTimeInterval();
  }

  updateTimelineControl();
}

// 复位 (停止)
function onResetClick() {
  // 移除图层及定时器
  clearInterval(updateTimer);
  updateTimer = '';

  // 初始化时间进度条
  currentTime = new Date(startTime);
  // 更新时间轴控件
  updateTimelineControl();

  refreshPlayer();
}

/**
 * 当速度按钮被点击时触发的函数。
 *
 * @param {number} index - 被点击的速度按钮的索引（从1开始）。
 */
function onSpeedClick(index) {
  // 修改界面元素倍速控件的显示状态
  // 取消所有倍速按钮的高亮状态，只高亮被点击的按钮
  var speeds = document.getElementsByClassName('zoomClass');
  for (let i = 0; i < speeds.length; i++) {
    speeds[i].classList.remove('active');
  }
  speeds[index - 1].classList.add('active');

  // 根据被点击的按钮的索引设置速度
  speed = index === 3 ? 4 : index;

  // 设置时间轴参数
  setPlayerSetting();

  if (updateTimer) {
    clearInterval(updateTimer);
    updateTimeInterval();
  }
}

// 更新时间轴数据 每秒执行一次
function updateTimeInterval() {
  updateTimelineControl();

  updateTimer = setInterval(() => {
    currentTime = new Date(currentTime.getTime() + speed * 1000);

    // 添加时间结束点逻辑
    if (currentTime.getTime() >= endTime.getTime()) {
      clearInterval(updateTimer);
      updateTimer = '';
    }
    updateTimelineControl();
  }, 1000);
}

/**
 * 更新时间参数和界面元素的显示状态。
 *
 * 该函数会更新开始时间、当前时间和结束时间的显示内容，
 * 并根据进度百分比更新标记的宽度。同时，根据是否在更新计时器，
 * 切换暂停和播放按钮的显示状态。
 *
 * @function
 */
function updateTimelineControl() {
  // 获取开始时间、结束时间和当前时间
  let startTimes = startTime.getTime(); // 开始时间戳
  let endTimes = endTime.getTime(); // 结束时间戳
  let currentTimes = currentTime.getTime(); // 当前时间戳

  // 计算时间差和当前时间点的秒数
  let timeDifference = endTimes - startTimes;
  let currentTimeDiff = currentTimes - startTimes;

  // 计算当前时间在时间范围内的百分比
  percent = (currentTimeDiff / timeDifference) * 100;

  var startTimeDiv = document.getElementsByClassName('start-time')[0];
  var currentTimeDiv = document.getElementsByClassName('current-time')[0];
  var endTimeDiv = document.getElementsByClassName('end-time')[0];
  var mark = document.getElementsByClassName('mark')[0];
  var imageId = document.getElementById('imageId');
  var pause = document.getElementsByClassName('pause')[0];
  var playBack = document.getElementsByClassName('playBack')[0];

  startTimeDiv.innerHTML = `${formatDate(startTime, 'HH:mm:ss')}`;
  currentTimeDiv.innerHTML = `${formatDate(currentTime, 'HH:mm:ss')}`;
  endTimeDiv.innerHTML = `${formatDate(endTime, 'HH:mm:ss')}`;
  mark.style.width = `${percent}%`;

  // 切换暂停和播放按钮的显示状态
  pause.style.display = updateTimer ? 'block' : 'none';
  playBack.style.display = updateTimer ? 'none' : 'block';
}

// #endregion ********** HTML界面控件的事件处理函数 **********

// #region ********** 工具函数 **********

// 格式化日期时间
function formatDate(date, format = 'YYYY/MM/DD HH:mm:ss') {
  if (!date) return '';
  date = new Date(date);
  const year = date.getFullYear();
  let hour = date.getHours();
  const isMS = year == 1970;
  if (isMS) {
    hour -= 8;
  }
  var o = {
    'M+': date.getMonth() + 1, //月份
    'D+': date.getDate(), //日
    'H+': hour, //小时
    'm+': date.getMinutes(), //分
    's+': date.getSeconds(), //秒
  };
  if (/(Y+)/.test(format)) format = format.replace(RegExp.$1, (year + '').substr(4 - RegExp.$1.length));
  for (var k in o) {
    if (new RegExp('(' + k + ')').test(format)) {
      format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length));
    }
  }

  return format;
}

// #endregion ********** 工具函数 **********

window.onload = function () {
  // 初始化
  // 1. 初始化孪易场景
  init();
};
